<template>
	<view class="content">
		<view class="formBox boxShadow">
			<view class="f-c-fs">
				<view class="label">活动名称：</view>
				<view class="value">{{statisticsInfo.activityName}}</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动类型：</view>
				<view class="value">秒杀活动</view>
			</view>
		</view>
		<view class="formBox">
			<view class="item  f-c-sa">
				<view style="flex:1">
					<view class="itemTitle">线索留资</view>
					<view class="num">{{statisticsInfo.clueRetention}}</view>
				</view>
				<view style="flex:1">
					<view class="itemTitle">分享次数</view>
					<view class="num">{{statisticsInfo.sharingTimes}}</view>
				</view>
				<view style="flex:1">
					<view class="itemTitle">访客数</view>
					<view class="num">{{statisticsInfo.numberOfVisitors}}</view>
				</view>
				<view style="flex:1">
					<view class="itemTitle">访客次数</view>
					<view class="num">{{statisticsInfo.numberOfVisits}}</view>
				</view>
			</view>
		</view>
		<view class="formBox">
			<view class="item  f-c-sa">
				<view style="flex:1">
					<view class="itemTitle">新客户总成交</view>
					<view class="num">{{statisticsInfo.newCustomers}}</view>
				</view>
				<view style="flex:1">
					<view class="itemTitle">老客户总成交</view>
					<view class="num">{{statisticsInfo.oldCustomers}}</view>
				</view>
			</view>
		</view>
		<view style="padding:20rpx">
			<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
		</view>
		<view style="padding:20rpx">
			<u-search @search="search" placeholder="请输入客户名称/手机号" v-model="shopList[current].listQuery.keyword"
				bg-color="#fff" :show-action="false"></u-search>
		</view>
		<view class=" formBox">
			<scroll-view scroll-x scroll-y class="table" @scrolltolower="scrolltolower">
				<uni-table border stripe emptyText="暂无更多数据" :loading="loading">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th v-for="(item, index) in tableTh" :key="index" align="center">{{ item }}</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in shopList[current].list" :key="index">
						<!-- 头像 -->
						<uni-td align="center">
							<image class="avatar" :src="item.vxUrl" mode=""></image>
						</uni-td>
						<!-- 昵称 -->
						<uni-td align="center">{{ item.vxName }}</uni-td>
						<!-- 客户性质 -->
						<uni-td align="center" v-if="current !=2">{{ item.memberType === 1 ? '新客户' : '老客户' }}</uni-td>
						<!-- 手机号 -->
						<uni-td align="center">{{ item.memberPhone }}</uni-td>
						<!-- 消费总金额/次数 -->
						<uni-td align="center" v-if="current == 0">{{'¥' + item.amount + '/' + item.frequency +'次' }}</uni-td>
						<!-- 浏览最新时间 -->
						<uni-td align="center" v-if="current == 1">{{ item.browseTime }}</uni-td>
						<!-- 浏览时长 -->
						<uni-td align="center" v-if="current == 1">{{ item.browseDuration}}</uni-td>
						<!-- 最新支付时间 -->
						<uni-td align="center" v-if="current == 0">{{ item.payTime }}</uni-td>
						<!-- 访问次数 -->
						<uni-td align="center" v-if="current == 1">{{ item.numberOfVisits }}</uni-td>
					</uni-tr>
				</uni-table>
			</scroll-view>
		</view>
		
		
		
	</view>
</template>
<script>
	import {
		getActityInfo,
		getPurchasedCustomers,
		recordsList,
		getSeckillClueCustomers
	} from '@/api/marketingB-helper.js';
	export default {
		data() {
			return {
				list: [{
						name: '已购买客户'
					},
					{
						name: '浏览客户'
					},
					{
						name: '线索客户'
					}
				],
				current: 0,
				staffTaskId: 0,
				activityId : '',
				statisticsInfo: {},
				loading: false,
				shopList: [{
						listQuery: {
							pageNum: 1,
							pageSize: 20,
							noData: true,
							keyword: ''
						},
						list: []
					},
					{
						listQuery: {
							pageNum: 1,
							pageSize: 20,
							noData: true,
							keyword: ''
						},
						list: []
					},
					{
						listQuery: {
							pageNum: 1,
							pageSize: 20,
							noData: true,
							keyword: ''
						},
						list: []
					},
				]
			};
		},
		computed: {
			tableTh() {
				if (this.current == 0) {
					return ['微信头像', '昵称/姓名', '客户性质', '手机号', '消费总金额/次数','最新支付时间'];
				} else if (this.current == 1){
					return ['微信头像', '昵称/姓名', '客户性质', '手机号', '浏览最新时间', '浏览时长',  '访问次数'];
				}else {
					return ['微信头像', '昵称/姓名', '手机号'];
				}
			}
		},
		onLoad(option) {
			this.staffTaskId = JSON.parse(option.param).staffTaskId;
			this.activityId = JSON.parse(option.param).activityId;
			this.getActityInfo();
			this.getTabDataListFn();
		},
		methods: {

			//统计数据
			getActityInfo() {
				getActityInfo(this.staffTaskId).then(res => {
					this.statisticsInfo = res.data;
				})
			},
			//搜索
			search() {
				this.shopList[this.current].listQuery.noData = true;
				this.shopList[this.current].listQuery.pageNum = 1;
				this.getTabDataListFn();
			},
			//标签改变
			sectionChange(e) {
				this.current = e;
				if (this.shopList[this.current].listQuery.noData && this.shopList[this.current].listQuery.pageNum == 1) {
					this.getTabDataListFn();
				}
			},
			//分页加载
			scrolltolower(e) {
				if (this.shopList[this.current].listQuery.noData) {
					this.loading = true;
					this.getTabDataListFn();
				}
			},
             
			//获取表格数据
			getTabDataListFn() {
				var params = {
					...this.shopList[this.current].listQuery,
					activityId: this.activityId,
				};
				if(this.current == 0) {//获取已购买客户列表
					getPurchasedCustomers(params).then(res => {
					   this.dealTbData(res);
					})
				}else if(this.current ==1 ) {//浏览客户
					recordsList(params).then(res => {
					   this.dealTbData(res);
					})
					
				}else if(this.current ==2 ) {//线索客户
					getSeckillClueCustomers(params).then(res => {
					    this.dealTbData(res);
					})
				}
			},
			//数据处理
			dealTbData(res) {
				if (this.shopList[this.current].listQuery.pageNum == 1) {
					this.shopList[this.current].list = res.data;
				} else {
					this.shopList[this.current].list = this.shopList[this.current].list.concat(res.data);
				}
				this.shopList[this.current].listQuery.pageNum += 1;
				if (this.shopList[this.current].listQuery.pageSize != res.data.length) {
					this.shopList[this.current].listQuery.noData = false;
				}
			}
			
		}
	};
</script>

<style lang="less" scoped>
	.content {
		padding-top: 20rpx;
	}

	.formBox {
		padding: 20rpx;

		.item {
			>view {
				border-right: 1px solid #ccc;
			}

			>view:last-child {
				border-right: none;
			}

			text-align: center;
			margin: 25rpx 0;

			.line {
				width: 2rpx;
				height: 74rpx;
				background-color: #dfdfdf;
			}

			.itemTitle {
				font-size: 24rpx;
				font-weight: 500;
				text-align: center;
				color: #131313;
				line-height: 36rpx;
				padding: 0 25rpx;
			}

			.num {
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				color: #ff6738;
				line-height: 36rpx;
			}
		}

		.table {
			// width: 300%;
			height: 500rpx;
		}

		.avatar {
			width: 50rpx;
			height: 50rpx;
			margin: 0 auto;
		}
	}

	.list {
		width: 100%;

		.item {
			width: 660rpx;
			height: 231rpx;
			background: #ffffff;
			border-radius: 18rpx;
			margin: 23rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.color {
				width: 110rpx;
				height: 36rpx;
				opacity: 1;
				background: #177fff;
				border-radius: 6rpx;
				font-size: 24rpx;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				line-height: 36rpx;
				margin-right: 18rpx;

				&.color1 {
					background: #177fff;
				}

				&.color2 {
					background: #ff6738;
				}

				&.color3 {
					background: #f54170;
				}

				&.color4 {
					background: #2db2ad;
				}
			}
		}

		.item-title {
			font-size: 28rpx;
			font-weight: 700;
			color: #131313;
			margin: 20rpx 0;
		}

		.info {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			line-height: 36rpx;
		}
	}
	.formBox .label{
			min-width: 120rpx; 
	}
</style>
